<template>
  <q-card :flat="flat">
    <q-card-section>
      <div class="row q-col-gutter-sm items-center">
        <div class="col-12">
          <div class="row q-col-gutter-md items-center">
            <div class="col text-h6">
              {{ team.name || '未命名阵容' }}
            </div>
            <div class="col-auto">
              <slot name="top-right" />
            </div>
          </div>
        </div>
        <div class="col-12">
          <div class="row q-col-gutter-md items-center">
            <div class="col-auto text-body1 text-blue" v-if="team.round === 1">A{{ team.boss }}</div>
            <div class="col-auto text-body1 text-red" v-else-if="team.round === 2">B{{ team.boss }}</div>
            <div class="col-auto text-body1 text-red" v-else-if="team.round >= 3">C{{ team.boss }}</div>
            <div class="col-auto">标伤：{{ getStdDamage(team.damage) }}</div>
            <div class="col-auto" v-if="team.borrow && typeof team.borrow === 'string'">
              {{ `借${getCharacterById(team.borrow).name}` }}
            </div>
          </div>
        </div>
        <div class="col-12">
          <div class="row q-col-gutter-sm">
            <div v-for="character in team.characters"
                 :key="character"
                 class="col">
              <character :avatar="getCharacterById(character).avatar"
                         :display-name="false"
                         :star="(team.filter[character]
                                && team.filter[character].star
                                && typeof toFilterStar(team.filter[character].star) === 'number')
                                ? toFilterStar(team.filter[character].star) : null"
                         :rank="(team.filter[character]
                                && team.filter[character].rank
                                && typeof toFilterRank(team.filter[character].rank) === 'number')
                                ? toFilterRank(team.filter[character].rank) : null"
                         style="width: 100%; max-width: 96px"/>
            </div>
          </div>
        </div>
      </div>
    </q-card-section>
    <q-card-section>
      <div class="row q-col-gutter-xs">
        <div class="col-12 text-h6">角色要求</div>
        <div v-for="character in team.characters"
             :key="character"
             class="col-12">
          <div class="row q-gutter-sm text-caption">
            <div>{{ getCharacterById(character).name }}</div>
            <div class="text-grey"
                 v-if="!(team.filter[character] && Object.keys(team.filter[character]).length > 0)">
              不作要求
            </div>
            <div v-if="team.filter[character] && team.filter[character].star">
              {{ toFilterStar(team.filter[character].star) }}星
            </div>
            <div v-if="team.filter[character] && team.filter[character].rank">
              Rank{{ toFilterRank(team.filter[character].rank) }}
            </div>
            <div v-if="team.filter[character] && team.filter[character].equipment">
              {{ toFilterEquipment(team.filter[character].equipment) }}
            </div>
            <div v-if="team.filter[character] && team.filter[character].weapon">
              专武{{ toFilterStar(team.filter[character].weapon) }}级
            </div>
          </div>
        </div>
      </div>
    </q-card-section>
    <q-card-section v-if="team.description && team.description.length > 0">
      <div class="row q-gutter-md items-center">
        <div class="text-h6">说明</div>
        <q-space/>
        <q-btn round
               flat
               :icon="expandDesc ? 'keyboard_arrow_up' : 'keyboard_arrow_down'"
               @click="expandDesc = !expandDesc"/>
      </div>
    </q-card-section>
    <q-slide-transition v-if="team.description && team.description.length > 0">
      <div v-show="expandDesc">
        <q-separator/>
        <q-card-section>
          <div v-html="team.description.replace(/\n/g, '<br />').replace(/\r/g, '<br />')"
               class="text-caption">
          </div>
        </q-card-section>
      </div>
    </q-slide-transition>
    <q-card-section v-if="team.actions && team.actions.length > 0">
      <div class="row q-gutter-md items-center">
        <div class="text-h6">操作方法</div>
        <q-space/>
        <q-btn round
               flat
               :icon="expand ? 'keyboard_arrow_up' : 'keyboard_arrow_down'"
               @click="expand = !expand"/>
      </div>
    </q-card-section>
    <q-slide-transition v-if="team.actions && team.actions.length > 0">
      <div v-show="expand">
        <q-separator/>
        <div>
          <q-btn class="full-width"
                 flat
                 :label="text ? '查看时间线轴' : '查看文字轴'"
                 @click="text = !text"/>
        </div>
        <q-card-section>
          <div class="q-mt-md" v-if="text">
            <div class="row q-col-gutter-md text-caption">
              <div v-for="(actionGroup, actionGroupKey) in mergeActions(team.actions)"
                   :key="actionGroupKey" class="col-12">
                <div class="row q-gutter-sm">
                  <div class="col-auto">{{ toActionTime(actionGroup.time) }}</div>
                  <div class="col">
                    <div v-for="(action, actionKey) in actionGroup.actions"
                         :key="actionKey"
                         class="row q-col-gutter-sm">
                      <div class="col-xs-5 col-md-3">{{ getCharacterById(action.character).name }}</div>
                      <div class="col-xs-7 col-md-9">{{ action.detail }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <q-timeline color="primary" v-else>
            <q-timeline-entry v-for="(actionGroup, actionGroupKey) in mergeActions(team.actions)"
                              :key="actionGroupKey" :title="toActionTime(actionGroup.time)">
              <div class="row q-col-gutter-md">
                <div v-for="(action, actionKey) in actionGroup.actions"
                     :key="actionKey"
                     class="col-12">
                  <div class="row q-gutter-md items-center">
                    <character :avatar="getCharacterById(action.character).avatar"
                               :display-name="false"
                               style="width: 48px"/>
                    <div>{{ action.detail }}</div>
                  </div>
                </div>
              </div>
            </q-timeline-entry>
          </q-timeline>
        </q-card-section>
      </div>
    </q-slide-transition>
  </q-card>
</template>

<script>
import Character from "components/Character";
import {format} from "quasar";

const {pad} = format;

export default {
  name: "Team",
  components: {Character},
  props: {
    team: {
      type: Object,
      required: true
    },
    fullCharacterList: {
      type: Array,
      required: true
    },
    flat: {
      type: Boolean,
      default: false
    }
  },
  data: function () {
    return {
      expand: false,
      expandDesc: false,
      text: false
    };
  },
  methods: {
    getStdDamage(property) {
      if (typeof property === 'number') return `${property}w`;
      else if (typeof property === 'object') {
        const data = Object.values(property);
        data.sort((a, b) => Number.parseInt(a) < Number.parseInt(b));
        const keys = Object.keys(data);
        if (data.length === 1 || data[keys[0]] === data[keys[keys.length - 1]])
          return `${data[keys[0]]}w`;
        else return `${data[keys[0]]}-${data[keys[keys.length - 1]]}w`;
      }
      return '未知';
    },
    getCharacterById(id) {
      for (const i of this.fullCharacterList) {
        if (id === i.id) {
          return i;
        }
      }
      return {
        avatar: '',
        name: '？？？'
      };
    },
    toActionTime(time) {
      return `${Math.floor(time / 60)}:${pad(`${time % 60}`, 2)}`;
    },
    toFilterStar(stars) {
      if (typeof stars === 'number') return stars;
      else if (typeof stars === 'object') {
        const data = Object.values(stars);
        data.sort((a, b) => Number.parseInt(a) < Number.parseInt(b));
        const keys = Object.keys(data);
        if (data.length === 1 || data[keys[0]] === data[keys[keys.length - 1]])
          return data[keys[0]];
        else return `${data[keys[0]]}-${data[keys[keys.length - 1]]}`;
      }
      return '未知';
    },
    toFilterRank(ranks) {
      if (typeof ranks === 'number') return ranks;
      else if (typeof ranks === 'object') {
        const data = Object.values(ranks);
        data.sort((a, b) => Number.parseInt(a) < Number.parseInt(b));
        const keys = Object.keys(data);
        if (data.length === 1 || data[keys[0]] === data[keys[keys.length - 1]])
          return data[keys[0]];
        else return `${data[keys[0]]}-Rank${data[keys[keys.length - 1]]}`;
      }
      return '未知';
    },
    toEquipmentText(location) {
      switch (location) {
        case 0:
          return '左上';
        case 1:
          return '右上';
        case 2:
          return '左中';
        case 3:
          return '右中';
        case 4:
          return '左下';
        case 5:
          return '右下';
      }
    },
    toFilterEquipment(e) {
      if (typeof e === 'object' && e.length === 6) {
        const data = Object.values(e);
        let eCount = 0;
        data.forEach(i => {
          if (i) eCount++;
        })
        let eString = '';
        let uCount = 0;
        if (eCount <= 3) {
          eString = '只穿'
          for (const i in data) {
            if (data[i]) {
              eString += this.toEquipmentText(Number.parseInt(i));
              uCount++;
              if (uCount === eCount) ;
              else if (uCount + 1 === eCount) eString += '和';
              else eString += '、';
            }
          }
        } else if (eCount === 6) {
          return '穿满装备'
        } else {
          eString = '不穿'
          for (const i in data) {
            if (!data[i]) {
              eString += this.toEquipmentText(Number.parseInt(i));
              uCount++;
              if (uCount === 6 - eCount) ;
              else if (uCount + 1 === 6 - eCount) eString += '和';
              else eString += '、';
            }
          }
        }
        return eString;
      }
      return '未知';
    },
    mergeActions(actions) {
      let mergedActions = [];
      for (const i of actions) {
        let has = false;
        for (const j in mergedActions) {
          if (mergedActions[j].time === i.time) {
            mergedActions[j].actions.push({
              character: i.character,
              detail: i.detail
            });
            has = true;
            break;
          }
        }
        if (!has) mergedActions.push({
          time: i.time,
          actions: [{
            character: i.character,
            detail: i.detail
          }]
        });
      }
      ;
      mergedActions.sort((a, b) => {
        return b.time - a.time;
      });
      return mergedActions;
    }
  }
}
</script>

<style scoped>

</style>
